<template>
  <view class="addOrder">
    <view class="address" @click="goAddress">
      <view class="address-title" v-if="address.name">
        <text class="title-user">
          {{ address.name ? address.name : "" }}
        </text>
        <text class="title-phone">
          {{ address.phone ? address.phone : "" }}
        </text>
      </view>
      <view class="address-text">
        <view class="text">
          {{ address.address ? address.address : "请选择收货地址" }}
        </view>
        <view class="arrow">
          <u-icon name="arrow-right" size="19"></u-icon>
        </view>
      </view>
    </view>
    <view class="order">
      <view class="item-center" v-for="item in orderList" :key="item">
        <view class="center-left">
          <image :src="imageUrl + item.image" mode="widthFix"></image>
        </view>
        <view class="center-right">
          <view class="right-top line-clamp-2">
            {{ item.name }}
          </view>
          <view class="right-center"> 规格：{{ item.sku.name }} </view>
          <view class="right-bottom">
            <text style="width: 100rpx; font-size: 24rpx">小计:</text>
            <text class="bot-min">{{ item.price }}</text>
            <text class="right-min">{{ item.quantity }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="bottom-left">
        <radio
          style="transform: scale(0.7)"
          @click="radioChange"
          color="#df4748"
          :checked="checked"
        />
        <text class="left-text">已阅 <text>《购买服务协议》</text> </text>
      </view>
      <view class="bottom-right">
        <text class="right-price">{{ allPrice }}</text>
        <button class="right-btn" @click="goPay">支付</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: "",
      checked: false,
      orderList: [
        {
          image: "/static/home/shop2.jpg",
          name: "环球德训鞋子女2024春季新款百搭休闲帆布鞋小众2023复古运动板鞋",
          sku: {
            name: "米黑加绒，35",
            skuId: 1,
          },
          price: 69,
          quantity: 3,
        },
        {
          image: "/static/home/shop1.jpg",
          name: "环球德训鞋子女2024春季新款百搭休闲帆布鞋小众2023复古运动板鞋",
          sku: {
            name: "单网米黑，35",
            skuId: 2,
          },
          price: 79,
          quantity: 1,
        },
        {
          image: "/static/home/shop2.jpg",
          name: "环球德训鞋子女2024春季新款百搭休闲帆布鞋小众2023复古运动板鞋",
          sku: {
            name: "米粉 【品质升级款】,35",
            skuId: 3,
          },
          price: 99,
          quantity: 5,
        },
      ],
      address: {},
      addressId: 0,
    };
  },
  computed: {
    allPrice() {
      let price = 0;
      this.orderList.forEach((item) => {
        price += item.price * item.quantity;
      });
      return price;
    },
  },
  mounted() {},

  methods: {
    goAddress() {
      this.address = {
        name: "张三",
        phone: "18888888888",
        address:
          "四川省 成都市 高新区 华阳镇街道天府大道南段89号一栋二单元1204",
        addressId: 1,
      };
      this.addressId = this.address.addressId;
      console.log(this.address.addressId);
    },
    radioChange() {
      this.checked = !this.checked;
      console.log(this.checked);
    },
    goPay() {
      if (!this.addressId) {
        uni.showToast({
          title: "请选择收货地址",
          icon: "none",
        });
        return;
      }
      if (this.checked) {
        uni.navigateTo({
          url: "/subpack/success",
        });
      } else {
        uni.showToast({
          title: "请阅读并勾选服务协议",
          icon: "none",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.addOrder {
  width: 100%;
  height: 100vh;
  background: #f7f7f7;
  padding: 20rpx 26rpx;
  box-sizing: border-box;
  .address {
    width: 100%;
    background: white;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .address-title {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 32rpx;
      .title-user {
        margin-right: 20rpx;
      }
    }
    .address-text {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-top: 20rpx;
      .text {
        font-size: 28rpx;
        color: #999999;
      }
    }
  }
  .order {
    width: 100%;
    background: white;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    .item-center {
      margin: 20rpx 0;
      display: flex;
      align-items: inherit;
      color: #333;
      image {
        width: 180rpx;
        height: 120rpx;
        border-radius: 20rpx;
      }
      .center-right {
        margin-left: 20rpx;
        .right-top {
          font-size: 28rpx;
          line-height: 1.4;
          font-weight: bold;
        }
        .right-center {
          font-size: 24rpx;
          color: #999999;
          margin: 10rpx 0;
        }
        .right-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          color: #535353;
          text {
            display: inline-block;
          }
          .bot-min {
            font-size: 34rpx;
            color: #e41200;
          }
          .bot-min::before {
            content: "¥";
            font-size: 24rpx;
            color: #e41200;
            margin-right: 6rpx;
          }
          .right-min {
            width: 100%;
            color: #333333;
            font-size: 28rpx;
            text-align: right;
          }
          .right-min::before {
            content: "x";
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }
  }
  .bottom {
    width: calc(100vw - 40rpx);
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    padding: 10rpx 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    .bottom-left {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      .left-text {
        text {
          color: #df4748;
        }
      }
    }
    .bottom-right {
      display: flex;
      align-items: center;
      .right-price {
        font-size: 42rpx;
        color: #df4748;
        margin-right: 20rpx;
      }
      .right-price::before {
        content: "¥";
        font-size: 28rpx;
      }
      .right-btn {
        width: 220rpx;
        background: #df4748;
        color: white;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        border-radius: 50rpx;
        margin-left: 20rpx;
      }
    }
  }
  //   去除滚动条
  ::-webkit-scrollbar {
    display: none;
  }
}
.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>